<template>
  <div>
    <el-table :data="queryList" border="" stripe style="width: 100%" height="50vh">
      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column prop="category" label="类别" />
      <el-table-column prop="code" label="代码" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="parts" label="危害部位" />
      <el-table-column prop="remarks" label="描述" />
      <el-table-column label="操作" width="120">
        <template #default="{row}">
          <el-link type="primary" @click="elitList(row)">修改</el-link>
          <el-link type="danger" @click="deleList(row)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="pages.page"
      :page-sizes="[10, 15, 20, 25]"
      :page-size="pages.listRows"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 修改对话框 -->
    <el-drawer
      ref="drawer"
      :visible.sync="dialog"
      direction="rtl"
      custom-class="demo-drawer"
      size="89%"
      title="修改危害症状代码"
      @close="editClose"
    >
      <div class="demo-drawer__content">
        <el-form ref="addRef3" :model="editFrom3" :rules="editRules3" label-width="120px">
          <div class="diabox3">
            <div class="box1">
              <el-form-item label="类别：" prop="category">
                <el-input v-model="editFrom3.category" placeholder="请输入" />
              </el-form-item>
              <el-form-item label="名称：" prop="name">
                <el-input v-model="editFrom3.name" placeholder="请输入" />
              </el-form-item>
              <el-form-item label="危害状描述：" prop="remarks">
                <el-input v-model="editFrom3.remarks" type="textarea" placeholder="请输入" />
              </el-form-item>
            </div>
            <div class="box2">
              <el-form-item label="代码：" prop="code">
                <el-input v-model="editFrom3.code" type="number" placeholder="请输入数字" />
              </el-form-item>
              <el-form-item label="危害部位：" prop="parts">
                <el-checkbox-group v-model="parts" size="mini">
                  <el-checkbox-button v-for="item in botany" :key="item.id" :label="item.name" />
                </el-checkbox-group>
              </el-form-item>
            </div>
          </div>
          <div class="diabox3-footer">
            <el-row>
              <el-col :span="12">
                <div class="footer-box1">危害装典型图片： </div>
                <div>
                  <upload-img v-model="editFrom3.cover" />
                </div>
              </el-col>
              <el-col :span="12">
                <div class="footer-box1">危害装早期图片： </div>
                <div>
                  <upload-img v-model="editFrom3.early" />
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="footer-box1">危害装中期图片： </div>
                <div>
                  <upload-img v-model="editFrom3.middle" />
                </div>
              </el-col>
              <el-col :span="12">
                <div class="footer-box1">危害装晚期图片： </div>
                <div>
                  <upload-img v-model="editFrom3.late" />
                </div>
              </el-col>
            </el-row>
          </div>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="(dialog = false)">取 消</el-button>
          <el-button type="primary" @click="confirmTheModification">确定提交</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { data3Api } from '@/api/UnderlyingData'
import { addsymptomApi, BotanyListApi, delesymptomApi } from '@/api/UnderlyingData'

import UploadImg from './uploadImg.vue'
export default {
  components: { UploadImg },
  data() {
    return {
      heigth: (window.innerHeight) * 0.65,
      dialog: false,
      // 植物根茎列表
      botany: [],
      // 分页数据
      pages: {
        page: 1,
        listRows: 10
      },
      queryList: [],
      total: null,
      // 修改症状代码
      editFrom3: {
        id: 0,
        // 类别
        category: '',
        // 名称
        name: '',
        // 症状代码
        code: '',
        // 危害部位 多个用英文逗号拼接
        parts: '',
        // 危害状描述
        remarks: '',
        // 	典型图片
        cover: '',
        // 早期图片
        early: '',
        // 	中期图片
        middle: '',
        // 晚期图片
        late: ''
      },
      // 图片表单
      imgs: {
        cover: '',
        early: '',
        middle: '',
        late: ''
      },
      parts: [],
      // 危害状态代码表单验证
      editRules3: {
        category: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        parts: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        remarks: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getdata3Api()
    this.getBotanyListApi()
  },
  methods: {
    // 植物列表
    async  getBotanyListApi() {
      this.botany = await BotanyListApi()
      console.log(this.botany)
    },
    async getdata3Api() {
      const res = await data3Api(this.pages)
      this.queryList = res.data
      this.total = res.count - 0
    },
    // 分页逻辑
    handleSizeChange(newsize) {
      this.pages.listRows = newsize
      this.getdata3Api()
    },
    handleCurrentChange(newNum) {
      this.pages.page = newNum
      this.getdata3Api()
    },
    // 修改
    elitList(row) {
      console.log(row)
      this.editFrom3.id = row.id
      this.editFrom3.category = row.category
      this.editFrom3.name = row.name
      this.editFrom3.code = row.code
      this.parts = row.parts.split(',')
      this.editFrom3.parts = this.parts.join(',')
      this.editFrom3.remarks = row.remarks
      if (row.cover !== '') {
        this.editFrom3.cover = `http://forest.kmdsoft.net/storage/${row.cover}`
      } else {
        this.editFrom3.cover = ''
      }
      if (row.early !== '') {
        this.editFrom3.early = `http://forest.kmdsoft.net/storage/${row.early}`
      } else {
        this.editFrom3.early = ''
      }
      if (row.middle !== '') {
        this.editFrom3.middle = `http://forest.kmdsoft.net/storage/${row.middle}`
      } else {
        this.editFrom3.middle = ''
      }
      if (row.late !== '') {
        this.editFrom3.late = `http://forest.kmdsoft.net/storage/${row.late}`
      } else {
        this.editFrom3.late = ''
      }
      this.imgs.cover = row.cover
      this.imgs.early = row.early
      this.imgs.middle = row.middle
      this.imgs.late = row.late
      this.dialog = true
    },
    // 确认修改
    async confirmTheModification() {
      this.editFrom3.cover = this.editFrom3.cover.slice(34)
      this.editFrom3.early = this.editFrom3.early.slice(34)
      this.editFrom3.middle = this.editFrom3.middle.slice(34)
      this.editFrom3.late = this.editFrom3.late.slice(34)
      console.log(this.editFrom3)
      const res = await addsymptomApi(this.editFrom3)
      if (res === null) {
        this.$message.error('无修改内容。')
      } else {
        this.dialog = false
        this.getdata3Api()
        this.$message.success('修改成功！')
      }
    },
    // 删除
    async  deleList(row) {
      const prve = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (prve !== 'confirm') return this.$message.info('已取消删除')
      await delesymptomApi({ id: row.id })
      this.getdata3Api()
      this.$message.success('删除成功！')
    },
    // 对话框关闭
    editClose() {
      this.editFrom3 = {}
    }
  }
}
</script>

<style lang="scss">
.el-link{
  margin-right: 10px;
}
// 危害样式
.diabox3{
  display: flex;
  justify-content: space-evenly;
  .box1{
    width: 50%;
  }
  .box2{
    width: 40%;
  }
}
.diabox3-footer{
 .el-col{
  margin-bottom: 50px;
  .footer-box1{
    float: left;
    margin-left: 6.5%;
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: 700;
  }
 }
}
.demo-drawer__footer{
  float: right;
  margin-right: 5%;
}
.el-checkbox-group{
  width: 50%;
  margin-left: 10px;
}
.el-pagination{
  margin-top: 20px;
}

.el-drawer.rtl {
        overflow: scroll
    }

.el-drawer__container ::-webkit-scrollbar{
    display: none;
}
</style>
